<template>
	<view class="page_wrapper">
		<view class="page_main_block">
			<canvas class="clock_canvas" canvas-id="clockCanvas" id="clockCanvas">
			</canvas>
			<view class="answer_block" :class="{show_answer: showAnswerFlag}">
				{{hour}} 时 {{minute}} 分
			</view>
		</view>
		<view>
			
		</view>
		<view class="bottom_block">
			<view class="btn_ word_test_btn" @click="showNextClock()">下一个时钟</view>
			<view class="btn_ show_pinyin_btn" @click="showAnswer()">显示答案</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hour: 12,
				minute: 0,
				showAnswerFlag: false
			}
		},
		onLoad() {
			this.showNextClock()
		},
		methods: {
			drawClock() {
				var context = uni.createCanvasContext('clockCanvas')
				context.setStrokeStyle("#000000")
				//重置原点
				context.save()
				context.translate(160, 160)
				
				// 画外圆
				context.arc(0, 0, 150, 0, 2 * Math.PI, true)
				context.lineWidth = 3
				context.stroke()
				const r = 150
				
				// 画小时数字 
				const hour = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]
				hour.forEach(function(num,i){
					const rad = 2 * Math.PI / 12 * i
					const x = Math.cos(rad) * (r - 30)
					const y = Math.sin(rad) * (r - 30)
					console.log('x : ' + y + ' y : ' + y)
					context.font = "18px sans-serif"
					context.textAlign = "center"
					context.textBaseline = "middle"
					context.fillText(num, x, y)
				})
				context.stroke()
				
				// 画刻度
				for (var i = 0; i < 60; i++) {
					var rad = 2 * Math.PI / 60 * i
					var x = Math.cos(rad) * (r - 10)
					var y = Math.sin(rad) * (r - 10)
						
					context.beginPath()
					if(i%5 == 0){
						context.fillStyle = "#000"
						context.arc(x, y, 2, 0, 2*Math.PI, true)
					}
					else {
						context.fillStyle = "#bbb"
						context.arc(x, y, 2, 0, 2*Math.PI, true)
					}   
					context.fill()
				}
				
				// 画中心点
				context.save()
				context.beginPath()
				context.arc(0, 0, 4, 0, 2*Math.PI,true)
				context.fillStyle = "#000"
				context.fill()
				
				// 画时针
				context.save()
				var rad = 2 * Math.PI / 12 * this.hour + 2 * Math.PI / 12 * this.minute / 60;
				context.beginPath()
				context.rotate(rad)
				context.moveTo(0, 15)
				context.lineTo(0, -r/2)
				context.lineWidth = 5
				context.lineCap = "round"
				context.fillStyle = "#000"
				context.stroke()
				context.restore()
				
				context.save();
				var rad = 2 * Math.PI / 60 * this.minute;
				console.log("旋转角度: " + rad)
				context.rotate(rad)
				context.moveTo(0, 18)
				context.lineTo(0, -r + 40)
				context.lineWidth = 3
				context.fillStyle = "#000"
				context.lineCap = "round"
				context.stroke()
				context.restore()
				
				context.draw()
			},
			showNextClock() {
				this.showAnswerFlag = false
				this.hour = Math.floor(Math.random() * 12)
				this.minute = Math.floor(Math.random() * 60)
				this.drawClock()
			},
			showAnswer() {
				this.showAnswerFlag = true
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.page_wrapper{
		color: #333333;
		font-size: 16px;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		.page_main_block{
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.clock_canvas{
				width: 320px;
				height: 350px;
				letter-spacing: 5px;
			}
			.answer_block{
				color: white;
				font-size: 25px;
				margin-bottom: 100px;
			}
			.show_answer{
				color: #333333;
			}
		}
		.bottom_block{
			height: 150px;
			display: flex;
			flex-direction: column;
			align-items: center;
			.btn_{
				width: 90%;
				height: 40px;
				border-radius: 6px;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 10px;
			}
			.word_test_btn{
				color: white;
				background-color: #67C23A;
			}
			.show_pinyin_btn{
				color: #409EFF;
				border: 1px solid #409EFF;
			}
		}
	}
</style>
